<template>
  <div class="medcode-m">
    <el-header>
      <img src="../assets/navtop-b.png" alt="" width="100%">
    </el-header>
    <div class="info-wrap">
      <div class="trace-info">
        <h3>追溯码信息</h3>
        <table class="table-trace">
          <tr>
            <td>追溯码</td>
            <td v-text="this.traceData.cur_code"></td>
          </tr>
          <tr>
            <td>药品名</td>
            <td v-text="this.traceData.drug.common_name"></td>
          </tr>
        </table>
      </div>
      <div class="drug-info">
        <h3>药品信息</h3>
        <table class="table-trace">
          <tr>
            <td>药品名</td>
            <td v-text="this.traceData.drug.common_name"></td>
          </tr>
          <tr>
            <td>药品id</td>
            <td v-text="this.traceData.drug.id"></td>
          </tr>
          <tr>
            <td>生产日期</td>
            <td>{{this.traceData.batch.made_date | dateFormat}}</td>
          </tr>

        </table>
      </div>
      <div class="drugs-location">
        <h3>流通信息</h3>
        <el-steps :active="2" direction="vertical">
          <el-step v-for="item in stepsForm.data" :key="item.title" :title="item.title" icon="iconfont icon-ti-factory" :description="item.description"></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        code: '',
        traceData: {
          code: '',
          create_at: '',
          drug: {
            common_name: '',
            id: '',
            create_at: ''
          },
          batch: {}
        },
        stepsForm: {
          data: [],
          loading: ''
        },
      }
    },
    filters: {
      dateFormat: function (date) {
        if (date) {
          console.log(date)
          return date.slice(0, 11)
        } else {
          return false
        }
      }
    },
    methods: {
      getLocationCode(code) {
        const self = this
        this.$http({
          url: '/batch-code/?cur_code=' + code,
          method: 'get'
        }).then(
          response => {
            console.warn(response)
            this.traceData = response.data.results[0]
            if (response.data.results[0].pack_layer != 3) {
              this.getLocationCode(response.data.results[0].parent_code)
            } else {
              let code = response.data.results[0].cur_code
              let made_date = response.data.results[0].batch.made_date
              this.$http({
                url: '/sales-out/?search=' + code,
                method: 'get'
              }).then(
                response => {

                  //success
                  //   this.$message({
                  //   message: '警告哦，这是一条警告消息',
                  //   type: 'warning'
                  // });
                  //测试用
                  this.activeSteps = response.data.results.length + 1
                  this.stepsForm.data = []
                  this.stepsForm.data.push({
                    title: '生产企业',
                    description: "上海现代制药股份有限公司  -  " + response.data.results[0].act_date
                  })
                  if (response.data.results.length > 0) {
                    this.stepsForm.data.push({
                      title: '流通企业',
                      description: "上海现代制药营销有限公司"
                    })
                    console.log(this.activeSteps)
                  }
                  this.stepsForm.loading = false
                }
              ).catch(error => {
                console.log(error.response)
                if (error.response.status == 401) {
                  self.$message({
                    message: error.response.data.detail,
                    type: 'warning'
                  })
                  this.$router.push({
                    path: '/login'
                  });
                } else if (error.response.status == 400) {
                  this.$message({
                    message: 'error400',
                    type: 'error'
                  })
                } else if (error.response.status == 404) {
                  this.$message({
                    message: error.response.data.detail,
                    type: 'warning'
                  })
                } else {
                  this.$message({
                    message: '未知错误',
                    type: 'error'
                  })
                }
                console.log(error);
              });
            }
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else if (error.response.status == 404) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
      },
    },
    mounted() {
      this.code = this.$store.getters.getSearchCode.code
      this.getLocationCode(this.code.code)
    }
  }

</script>

<style scoped>
  .medcode-m {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }

  .el-header {
    background: white;
  }

  .info-wrap {
    background: white;
    margin: 20px 20px 0;
    padding: 20px 20px 0;
    overflow: scroll;
  }

  h3 {
    text-align: left;
    margin: 5px 0;
    color: #4090c7
  }

  .drug-info {
    margin: 20px 0px;
  }

  .el-steps {
    height: auto;
    overflow: hidden;
    padding: 20px;
  }

  .el-step {
    max-width: 100% !important;
  }

  .table-trace {
    width: 100%;
  }

  .medcode-m>>>.is-finish {
    color: rgb(149, 170, 109);
    border-color: rgb(149, 170, 109);
  }

  .medcode-m>>>.is-process {
    color: #4090c7;
    border-color: #4090c7;
  }

  /* Border styles */

  .table-trace thead,
  .table-trace tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(235, 242, 224);
  }

  .table-trace {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(235, 242, 224);
  }

  /* Padding and font style */

  .table-trace td,
  .table-trace th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(149, 170, 109);
  }

  /* Alternating background colors */

  .table-trace tr:nth-child(even) {
    background: rgb(230, 238, 214)
  }

  .table-trace tr:nth-child(odd) {
    background: rgb(230, 238, 214)
  }

</style>
